<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel='stylesheet' type='text/css' href='./printContent.css'>
</head>
<body>
    <a href="javascript:void(0);" class="dayin">打印</a>

    <!-- 需要打印的内容区域 printcontent ！！ -->
    <div id="printcontent">
        <table >
            <tr>
                <th>名</th>
                <th>作</th>
                <th>内</th>
            </tr>
            <tr>
                <td>浣溪沙</td>
                <td>[宋] 赵彦端</td>
                <td>菊已开时梅未通。似寒如暖意融融。情亲语妙一杯中。歌舞欲来须更理，林泉有乐政须同。好诗多味酒无功。</td>
            </tr>
            <tr>
                <td>春暮</td>
                <td>[宋] 方岳</td>
                <td>卷中未有好诗看，草满池塘梦已残。客又不来春又暮，一帘新雨杏花寒。</td>
            </tr>
        </table>
        <img src="https://www.shicimingju.com/pics/item/2973.jpg" alt="">
    </div>
    <div onclick="getvl(this)">das</div>

    <script>
        // document.designMode = "on";
        // $(function(){
            // $('.dayin').click(function(){
            //     doPrint3()
            // })
        // })
            

        $('.dayin').click(function(){
            doPrint3()
        })
        
        function doPrint3(){
            // 获取 (还不存在的 iframe 区域)
            var iframe=document.getElementById("print-iframe");

            //判断iframe是否存在，不存在则创建iframe
            if(!iframe){  
                // 获取 需要打印的区域
                var el = document.getElementById("printcontent");
                // 创建 iframe 元素标签
                iframe = document.createElement('IFRAME');
                //
                var doc = null;
                //设定 iframe 元素标签 id, 以供调用
                iframe.setAttribute("id", "print-iframe");
                // 设定 iframe 元素标签 样式！！
                // 即 使其 脱离文档流
                iframe.setAttribute('style', `
                    position:absolute;
                    width:0px;
                    height:0px;
                    left:-500px;
                    top:-500px;
                `);
                // 将 iframe 添加到 body 中
                document.body.appendChild(iframe);

                //contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。
                doc = iframe.contentWindow.document;


                //这里可以自定义样式
                doc.write("<link rel='stylesheet' type='text/css' href='E:/编程/前端基础练习/Vue_学习/Resume/resumeProject/test/printContent.css'>");

                // // 获取iframe html文件head
                // const head = doc.getElementsByTagName('head')
                // // 新建link标签
                // const linkTag = document.createElement('link')
                // // link标签引入css文件的地址
                // linkTag.href = '/test/printContent.css'
                // // 设置link标签属性
                // linkTag.setAttribute('rel', 'stylesheet')
                // // 设置link标签属性
                // linkTag.setAttribute('type', 'text/css')
                // // 将link标签添加进iframe html文件的head里
                // head[0].append(linkTag)


                //无效 路劲
                //'printContent.css'
                //'./printContent.css'
                //'./test/printContent.css' 本身不合法
                //

                //  
                // doc.write(`
                //     <style>
                //         body{
                //             background-color: #999;
                //         }
                //         table{
                //             border: 2px solid black;
                //         }
                //     </style>
                //     `);

                doc.write("<title>我是title头部信息啊！！！</title>");
                doc.write('<div>' + el.innerHTML + '</div>');
                //？？？
                // doc.close();
                // ？？？
                // iframe.contentWindow.focus();            
            }

            //调用 iframe 的打印            
            iframe.contentWindow.print();

            //？？？
            // if (navigator.userAgent.indexOf("MSIE") > 0){
            //     document.body.removeChild(iframe);
            // }
        }
    </script>


</body>
</html>
<!-- 
    Frame/IFrame contentWindow 属性 
    https://www.runoob.com/jsref/prop-frame-contentwindow.html
    - contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。
    - 可以通过所有标准的 DOM 方法来处理被返回的对象。


 -->

